// src/navigation/AppNavigator.js
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { Image } from 'react-native';
import LoginScreen from '../screens/LoginScreen';
import RegisterScreen from '../screens/RegisterScreen';
import HomeScreen from '../screens/HomeScreen';
import ChatTabsScreen from '../screens/ChatTabsScreen';
import ProfileScreen from '../screens/ProfileScreen';
import FilterScreen from '../screens/FilterScreen';
import NewMatchesScreen from '../screens/NewMatchesScreen';
import MatchProfileScreen from '../screens/MatchProfileScreen';
import FeedScreen from '../screens/FeedScreen';
import EditProfileScreen from '../screens/EditProfileScreen';
import VipScreen from '../screens/VipScreen';
import RechargeScreen from '../screens/RechargeScreen';
import PaypalScreen from '../screens/PaypalScreen';
import LikesScreen from '../screens/LikesScreen';
import VisitorsScreen from '../screens/VisitorsScreen';
import WeChatPayScreen from '../screens/WeChatPayScreen';
import CompleteProfileScreen from '../screens/CompleteProfileScreen';
import CustomDrawerContent from '../components/CustomDrawerContent';

// 导入图标
const fxIcon = require('../../assets/icons/fx.png');
const fxhIcon = require('../../assets/icons/fxh.png');
const syIcon = require('../../assets/icons/sy.png');
const syhIcon = require('../../assets/icons/syh.png');
const wdIcon = require('../../assets/icons/wd.png');
const wdhIcon = require('../../assets/icons/wdh.png');
const xxIcon = require('../../assets/icons/xx.png');
const xxhIcon = require('../../assets/icons/xxh.png');

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();

// 创建底部导航栏
function HomeTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarActiveTintColor: '#2196F3',
        tabBarInactiveTintColor: 'gray',
        headerShown: false,
      }}>
      <Tab.Screen 
        name="Home" 
        component={HomeScreen} 
        options={{ 
          title: '滑动',
          tabBarLabel: '滑动',
          tabBarIcon: ({ focused }) => (
            <Image 
              source={focused ? syhIcon : syIcon}
              style={{ width: 24, height: 24 }} 
            />
          ),
        }}
      />
      <Tab.Screen 
        name="Feed" 
        component={FeedScreen} 
        options={{ 
          title: '动态',
          tabBarLabel: '动态',
          tabBarIcon: ({ focused }) => (
            <Image 
              source={focused ? fxhIcon : fxIcon}
              style={{ width: 24, height: 24 }} 
            />
          ),
        }}
      />
      <Tab.Screen 
        name="Chat" 
        component={ChatTabsScreen} 
        options={{ 
          title: '聊天',
          tabBarLabel: '聊天',
          tabBarIcon: ({ focused }) => (
            <Image 
              source={focused ? xxhIcon : xxIcon}
              style={{ width: 24, height: 24 }} 
            />
          ),
        }}
      />
      <Tab.Screen 
        name="Profile" 
        component={ProfileScreen} 
        options={{ 
          title: '我的',
          tabBarLabel: '我的',
          tabBarIcon: ({ focused }) => (
            <Image 
              source={focused ? wdhIcon : wdIcon}
              style={{ width: 24, height: 24 }} 
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

// 创建带侧边栏的导航
function DrawerNavigator() {
  return (
    <Drawer.Navigator
      drawerContent={(props) => <CustomDrawerContent {...props} />}
    >
      <Drawer.Screen 
        name="MainTabs" 
        component={HomeTabs} 
        options={{ 
          title: '首页',
          headerShown: false,
        }}
      />
    </Drawer.Navigator>
  );
}

const AppNavigator = () => (
  <Stack.Navigator initialRouteName="Login">
    <Stack.Screen 
      name="Login" 
      component={LoginScreen} 
      options={{ headerShown: false }}
    />
    <Stack.Screen 
      name="Register" 
      component={RegisterScreen} 
      options={{ headerShown: false }}
    />
    <Stack.Screen 
      name="CompleteProfile" 
      component={CompleteProfileScreen} 
      options={{ 
        title: '完善资料',
        headerStyle: {
          backgroundColor: '#2196F3',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
    />
    <Stack.Screen 
      name="Main" 
      component={DrawerNavigator} 
      options={{ headerShown: false }}
    />
    <Stack.Screen 
      name="Filter" 
      component={FilterScreen} 
      options={{ 
        title: '筛选条件',
        headerStyle: {
          backgroundColor: '#2196F3',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
    />
    <Stack.Screen 
      name="NewMatches" 
      component={NewMatchesScreen} 
      options={{ 
        title: '新配对',
        headerStyle: {
          backgroundColor: '#2196F3',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
    />
    <Stack.Screen 
      name="MatchProfile" 
      component={MatchProfileScreen} 
      options={{ 
        title: '配对详情',
        headerStyle: {
          backgroundColor: '#2196F3',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
    />
    <Stack.Screen 
      name="EditProfile" 
      component={EditProfileScreen} 
      options={{ 
        title: '编辑资料',
        headerStyle: {
          backgroundColor: '#2196F3',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
    />
    <Stack.Screen 
      name="Vip" 
      component={VipScreen} 
      options={{ 
        title: '开通VIP',
        headerStyle: {
          backgroundColor: '#2196F3',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
    />
    <Stack.Screen 
      name="Recharge" 
      component={RechargeScreen} 
      options={{ 
        title: '充值粉钻',
        headerStyle: {
          backgroundColor: '#2196F3',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
    />
    <Stack.Screen 
      name="Paypal" 
      component={PaypalScreen} 
      options={{ 
        title: 'PayPal支付',
        headerStyle: {
          backgroundColor: '#0070ba',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
    />
    <Stack.Screen 
      name="WeChatPay" 
      component={WeChatPayScreen} 
      options={{ 
        title: '微信支付',
        headerStyle: {
          backgroundColor: '#07c160',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
    />
    <Stack.Screen 
      name="Likes" 
      component={LikesScreen} 
      options={{ 
        title: '谁赞了我',
        headerStyle: {
          backgroundColor: '#2196F3',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
    />
    <Stack.Screen 
      name="Visitors" 
      component={VisitorsScreen} 
      options={{ 
        title: '谁访问了我',
        headerStyle: {
          backgroundColor: '#2196F3',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
    />
  </Stack.Navigator>
);

export default AppNavigator;